<template>
  <div>
     <input type="text"  v-model="name">
  <input type="button" value="添加" @click="add">

    <ul>
      <todo v-for=" item in list" :key="item" >
      <template v-slot:item="itemProps">
           <span :style="{fontSize: '20px',color:itemProps.checked?'red':'blue'}">{{item}}</span>
      </template>

      </todo>
    </ul>
  </div>

</template>
<script>
import todo from  '@/components/TodoItem'
export default {
  name:'Test1'
  ,data(){
    return{
      list:['tom','jo']
      ,name:''
    }
  }
  ,methods:{
    add(){
      this.list.push(this.name);
    }
  }
  ,components:{todo,}
}
</script>
<style>

</style>
